<template>


  <div>

    <!--  查询-->
    <div>

      <el-form inline label-width="40px" size="mini" class="demo-form-inline">

        <el-form-item label="名称">
          <el-input placeholder="请输入分支名称" v-model="searchOpsAppBranchParam.branchName" clearable size="mini">
            <template slot="prepend"></template>
          </el-input>
        </el-form-item>

        <el-form-item label="状态" >
          <el-select v-model="searchOpsAppBranchParam.status" placeholder="请选择" clearable  >
            <el-option key="1" label="维护中" :value="1"/>
            <el-option key="2" label="已弃用" :value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="getPageListBefore">查询</el-button>
          <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBefore">新增</el-button>
        </el-form-item>

      </el-form>

    </div>


    <!--列表-->
    <div style="min-height: 380px; ">
      <div class="icon-container">
        <div class="icon" v-for="(item, index) in tableData" :key="index"
             :style="{ backgroundColor: item.status === 1 ? '#B2DBBB' : item.status === 2 ? '#EBEEF5' : '#F0F5F0' }"
             style="background-color: #FFE14C" >
          <h3 v-if="item.branchName" @click="openViewBefore(item)">{{item.branchName}}</h3>
          <div @click="openViewBefore(item)">{{ item.status === 1 ? '维护中' : item.status === 2 ? '已弃用' : ''}} (安装数：{{item.installNum}})</div>
          <div>
            <el-button style="color: #FF7043" @click="openUpdBefore(item)" type="text" size="small">编辑</el-button>
            <el-button style="color: #FF7043" @click="delTips(item)" type="text" size="small">删除</el-button>
          </div>
        </div>
      </div>

    </div>


    <!--分页部分-->
    <el-pagination
      style="width:33%; margin-right:10px; margin-top:10px;"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="pageCurrentChange"
      :page-size="pageConfig.size"
      :current-page="pageConfig.current"
      :pager-count="5"
      :total="pageConfig.total">
    </el-pagination>

    <AppBranchSaveUpd ref="OpsAppBranchSaveUpdRef" @getOpsAppBranchPageList="getOpsAppBranchPageList"/>
    <AppBranchDetailed ref="AppBranchDetailedRef"/>

  </div>

</template>



<script>




import http from '@/utils/http'
import AppBranchSaveUpd from './AppBranchSaveUpd.vue'
import AppBranchDetailed from './AppBranchDetailed.vue'



export default {
  name: "AppBranchList",
  components: {
    AppBranchSaveUpd,
    AppBranchDetailed
  },
  data() {
    return {
      // 查询参数
      searchOpsAppBranchParam: {
        appId: null,
        branchName: null,
        status: null,
      },
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 20,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
    }
  },
  methods: {
    /**
     * 打开保存的弹框
     */
    openSaveBefore() {
      this.$refs.OpsAppBranchSaveUpdRef.init('save', this.$route.query.appId)
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdBefore(obj) {
      this.$refs.OpsAppBranchSaveUpdRef.init('upd', obj)
    },
    /**
     * 查看
     * @param obj 这一行数据
     */
    openViewBefore(obj){
      this.$refs.AppBranchDetailedRef.openOpsAppBranchDetailed(obj)
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsAppBranch(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsAppBranch(obj) {
      http.post("/opsAppBranch/delOpsAppBranch", {
        opsAppBranchId: obj.id,
      }).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401) {
            this.$message.error(res.msg);
          }
          return
        }

        this.getOpsAppBranchPageList()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getOpsAppBranchPageList()
    },
    /**
     * 重置查询条件
     */
    resetQuery() {
      this.searchOpsAppBranchParam = {
        name: null,
        code: null,
      }
    },
    /**
     * 分页前重置分页参数
     */
    getPageListBefore() {
      this.pageConfig.current = 1
      this.getOpsAppBranchPageList()
    },
    /**
     * 分页查询列表
     */
    getOpsAppBranchPageList() {
      this.searchOpsAppBranchParam.current = this.pageConfig.current
      this.searchOpsAppBranchParam.size = this.pageConfig.size
      this.searchOpsAppBranchParam.appId = this.$route.query.appId,
      http.post("/opsAppBranch/getOpsAppBranchPageList", this.searchOpsAppBranchParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
  // 进入马上执行
  mounted() {
    this.getOpsAppBranchPageList()
  },
}
</script>

<style scoped>


/*
 中间部分的应用div start =========================
 */

.icon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 从左到右排列 */
  gap: 10px; /* 图标之间的间距 */
  max-width: 1200px; /* 最大宽度，根据需求调整 */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.icon {
  flex: 0 1 auto; /* 根据内容宽度动态调整 */
  min-width: 200px; /* 最小宽度 */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*color: #fff;*/ /* 文字颜色 */
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  margin: 3px;
  cursor: pointer;
  flex-direction: column;
}


/*
 中间部分的应用div end =========================
 */

</style>
